/*
@author: feng
@date: 2022/6/27 21:29
@Version: 1.0
@last modifined by : feng
@last Modifined time : 2022/6/27 21:29
*/

import React from 'react';

const themeColorList = [
  { background: '#f5222d', label: 'Dust Red', title: '薄暮, 斗志、奔放' },
  { background: '#fa541c', label: 'Volcano', title: '火山, 醒目、澎湃' },
  { background: '#fa8c16', label: 'Sunset Orange', title: '日暮, 温暖、欢快' },
  { background: '#faad14', label: 'Calendula', title: '金盏花, 活力、积极' },
  { background: '#fadb14', label: 'Sunrise Yellow', title: '日出, 出生、阳光' },
  { background: '#a0d911', label: 'Lime', title: '青柠, 自然、生机' },
  { background: '#52c41a', label: 'Polar Green', title: '极光绿, 健康、创新' },
  { background: '#13c2c2', label: 'Cyan', title: '明青, 希望、坚强' },
  { background: '#1890ff', label: 'Daybreak Blue', title: '拂晓蓝, 包容、科技、普惠' },
  { background: '#2f54eb', label: 'Geek Blue', title: '极客蓝, 探索、钻研' },
  { background: '#722ed1', label: 'Golden Purple', title: '酱紫, 优雅、浪漫' },
  { background: '#eb2f96', label: 'Magenta', title: '法式洋红, 明快、感性' },
];

const ThemeDemo = () => {
  return (
    <div className="common-component-theme-skinning-drawer-content">
      <div className="common-component-theme-skinning-theme-color">
        <p>主题色</p>
        <div className="common-component-theme-skinning-list">
          {
            themeColorList.map((item, idx) => {
              const styleParams = {
                width: 25,
                height: 25,
                margin: 'auto',
                backgroundColor: item.background,
              };
              return <div key={idx} className="common-component-theme-skinning-list-warp">
                <p style={styleParams} title={item.title} />
                <span>{ item.label }</span>
              </div>
            })
          }
        </div>
      </div>
      <div className="common-component-theme-skinning-theme-demo">
        表单 Demo
      </div>
    </div>
  );
};

export default ThemeDemo;
